<template>
  <el-dialog
    title="管理产品型号"
    :visible.sync="dialogVisible"
    top="10px"
    width="95%">
    <div id="manager-model-dialog-content" :style="{height:(this.getWinSize().height-200)+'px'}">

      <div style="color: #888888; font-size: 12px; text-align: center" v-if="list.length===0">暂无型号...</div>
      <div class="row" v-for="(item,index) in list">
        <div class="row-box" style="height: 80px;">
          <div class="item">
            <div class="name">图片:</div>
            <div class="value" style="text-indent: 0px;">
              <img :src="showImage(item.image)" class="avatar" style="width: 65px; margin: 3px; margin-left: 5px;">
            </div>
          </div>
          <div class="item">
            <div class="name">默认:</div>
            <div class="value">
              <el-tag effect="dark" style="text-indent: 0px" :type="item.isDefault?'success':'info'" v-text="item.isDefault?'是':'否'"></el-tag>
            </div>
          </div>
        </div>


        <div class="row-box">
          <div class="item">
            <div class="name">价格:</div>
            <div class="value">
              <span class="b red" v-text="'￥'+ToMoney(item.price)"></span>
            </div>
          </div>
          <div class="item">
            <div class="name">库存:</div>
            <div class="value">
              <span class="b" v-text="item.nums"></span>
            </div>
          </div>
          <div class="c"></div>
        </div>

        <div class="row-box">
          <div class="item">
            <div class="name">团购价格:</div>
            <div class="value">
              <span class="b red" v-text="'￥'+ToMoney(item.groupPrice)"></span>
            </div>
          </div>
          <div class="item">
            <div class="name">团购数量:</div>
            <div class="value">
              <span class="b" v-text="item.groupNums"></span>
            </div>
          </div>
          <div class="c"></div>
        </div>

        <div class="row-box">
          <div class="item">
            <div class="name">积分:</div>
            <div class="value">
              <span class="b red" v-text="'￥'+ToMoney(item.score)"></span>
            </div>
          </div>
          <div class="item">
            <div class="name">佣金:</div>
            <div class="value">
              <span class="b" v-text="item.commission"></span>
            </div>
          </div>
          <div class="c"></div>
        </div>


        <div class="row-box">
          <div class="item">
            <div class="name">型号:</div>
            <div class="value">
              <div class="model-tag ovd_s"
                   style="text-indent: 0px; padding-left: 5px; color: #FFFFFF; background: #ea8261; display: inline-block; border-radius: 3px; padding-right: 5px;"
                   :style="{
                     maxWidth: (Math.ceil(winWidth*0.35))+'px'
                   }"
                   v-text="item.model"></div>
            </div>
          </div>
          <div class="item">
            <div class="name">状态:</div>
            <div class="value">
              <el-tag effect="dark" style="text-indent: 0px" :type="item.status?'success':'info'" v-text="item.status?'开启':'关闭'"></el-tag>
            </div>
          </div>

          <div class="c"></div>
        </div>

        <div class="row-box" style="display: block; text-align: right;">
          <el-button type="success" @click="editModel(item,index)">编辑</el-button>
          <el-button type="danger" @click="delModel(index)">删除</el-button>
          &nbsp;&nbsp;
        </div>

      </div>
      <div class="c"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="createModel">新增</el-button>
      <el-button type="success" @click="confirm(false)" v-show="list.length>0">确认</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'ManagerModelDialog',
  data: function () {
    return {
      winWidth: this.getWinSize().width,
      callback: null,
      dialogVisible: false,
      list: [],
      specificationsData: [],
    }
  },
  destroyed () {
    this.bus.$off('ManagerModelDialogCallBus')
  },
  mounted () {
    let $this = this
    $this.bus.$on('ManagerModelDialogCallBus', function (list,specificationsData, callback) {
      $this.dialogVisible = true
      $this.specificationsData = specificationsData
      $this.callback = callback
      if (list && list.length > 0) {
        $this.list=list
      }
      $this.$forceUpdate()
    })
  },
  methods: {
    checkModelRepeat:function (currModel,currIndex) {
      let $this=this
      var has=false
      $this.list.forEach(function (value, index) {
        if (index!==currIndex && value.model===currModel.model){
          has=true
        }
      })
      return has
    },
    // 检查默认
    checkDefault:function () {
      let $this=this
      if ($this.list.length===0){
        return;
      }
      var hasDefault=false
      $this.list.forEach(function (value, index) {
        if (value.isDefault){
          hasDefault=true
        }
      })
      if (!hasDefault){
        $this.$set($this.list[0],'isDefault',true)
      }
    },
    // 取消其他默认
    cancelAllDefault:function () {
      let $this=this
      $this.list.forEach(function (value, index) {
        $this.$set($this.list[index],'isDefault',false)
      })
    },
    // 增加-型号
    createModel:function () {
      let $this = this
      $this.bus.$emit('CreateModelDialogCallBus',{},$this.specificationsData, function (backModel) {
        if ($this.list.length===0){
          $this.$message.warning('当前型号 不能取消默认')
          backModel.isDefault=true
        }else{
          if (backModel.isDefault){
            $this.cancelAllDefault()
          }
        }
        if ($this.checkModelRepeat(backModel,-1)){
          return $this.$message.warning('当前型号 已经添加')
        }
        $this.list.push(backModel)
        $this.$forceUpdate()
      })
    },
    // 删除-型号
    delModel: function (index) {
      if (this.list.length>0){
        this.list.splice(index,1)
      }
      this.checkDefault()
      this.$forceUpdate()
    },
    // 编辑-型号
    editModel: function (model,index) {
      let $this = this
      $this.bus.$emit('CreateModelDialogCallBus',model,this.specificationsData, function (backModel) {
        console.log('backModel',backModel)
        console.log('$this.list',$this.list)
        if (backModel.isDefault){
          $this.cancelAllDefault()
        }
        if ($this.list.length===1 && !backModel.isDefault){
          $this.$message.warning('当前型号 不能取消默认')
          backModel.isDefault=true
        }
        if ($this.checkModelRepeat(backModel,index)){
          return $this.$message.warning('当前型号 已经添加')
        }
        $this.$set($this.list,index,backModel)
        $this.$forceUpdate()
      })
    },
    // 确认-修改完毕
    confirm: function (dialogVisible) {
      if (typeof this.callback === 'function') {
        this.callback(this.list)
        this.dialogVisible = dialogVisible?dialogVisible:false
      }
    }
  }
}
</script>

<style>
#manager-model-dialog-content {
  overflow-x: hidden;
  overflow-y: auto;
}
#manager-model-dialog-content .row{
  float: left;
  margin-top: 5px;
}

#manager-model-dialog-content .row-box {
  padding-top: 5px;
  padding-bottom: 5px;
  /*margin-top: 10px;*/
  min-height: 20px;
  line-height: 20px;
  background: #f1f1f1;
  float: left;
  width: 100%;
  display: flex;
}

#manager-model-dialog-content .row-box > .item {
  flex: 1;
  text-indent: 5px;
}

#manager-model-dialog-content .row-box > .item > .name {
  width: 50%;
  float: left;
  text-indent: 5px;
  font-size: 12px;
}

#manager-model-dialog-content .row-box > .item > .value {
  font-size: 12px;
  width: 77%;
  float: left;
  text-indent: 5px;
}
</style>
